<template>
	<div>
		<Row type="flex" justify="end" class="code-row-bg" :gutter="16">

			<Col span="3">
			<Select v-model="searchForm.dot_id" placeholder="网点">
				<Option value="" key="">全部</Option>
				<Option v-for="(item,key) in getSearchData.dot" :value="key" :key="key">{{ item }}</Option>
			</Select>
			</Col>
			<Col span="3">
			<Select v-model="searchForm.apply_status" filterable placeholder="申请状态">
				<Option value="" key="">全部</Option>
				<Option v-for="(item,key) in getSearchData.apply_status" :value="key" :key="key">{{ item }} </Option>
			</Select>
			</Col>
			<Col span="3">
			<Select v-model="searchForm.status" filterable placeholder="使用状态">
				<Option value="" key="">全部</Option>
				<Option v-for="(item,key) in getSearchData.status" :value="key" :key="key">{{ item}} </Option>
			</Select>
			</Col>
			<Col span="2">
			<Button type="primary" icon="ios-search" @click="getTableDataExcute(1)">搜索</Button>
			</Col>
			<Col span="2">
			<Button type="success" icon="plus" @click="addBtn()">添加</Button>
			</Col>
		</Row>
		<br>

		<Row>
			<div class="demo-spin-container" v-if="tableLoading">
				<Spin fix>
					<Icon type="load-c" size=18 class="spin-icon-load"></Icon>
					<div>加载中...</div>
				</Spin>
			</div>
			<Table border :columns="columns" :data="feeds.data" @on-sort-change='onSortChange'></Table>
			<div style="margin: 10px;overflow: hidden">
				<div style="float: right;">
					<Page :total="feeds.record_count" :current="feeds.page_current" :page-size="feeds.page_size" class="paging" show-elevator show-total show-sizer @on-change="handleOnPageChange" @on-page-size-change='onPageSizeChange'></Page>
				</div>
			</div>
		</Row>

		<Drawer title="网点评价" v-model="rateModal.show" width="500">
			<ul>
				<li v-for="val in rateData.data" style="margin-top: 20px;list-style-type:none;">
					<Avatar icon="ios-person" size="large" :src="val.head_img" />
					<span>{{val.username}}</span>
					<span style="color: red;">{{val.rate}}</span>
					<Rate disabled v-model="val.stars" />
					<span>{{val.create_time}}</span>
				</li>
			</ul>
		</Drawer>

		<add-component v-if='addModal.show === true' @on-add-modal-success='getTableDataExcute(1)' @on-add-modal-hide="addModalHide"></add-component>
		<edit-component v-if='editModal.show === true' :modal-id='editModal.id' @on-edit-modal-success='getTableDataExcute(1)' @on-edit-modal-hide="editModalHide"> </edit-component>
		<map-component v-if='mapModal.show === true' :modal-id='mapModal.id' @on-map-modal-success='getTableDataExcute(1)' @on-map-modal-hide="mapModalHide"> </map-component>

	</div>
</template>

<script>
	import AddComponent from './components/add-car'
	import EditComponent from './components/edit-car'
	import MapComponent from './components/map-car'
	import {
		getTableData,
		getData,
		delCar,
		changeStatus

	} from '@/api/car'

	export default {
		components: {
			AddComponent,
			EditComponent,
			MapComponent
		},
		data() {
			return {
				getSearchData: {
					dot: [],
					status: [],
					apply_status: []
				},
				searchForm: {
					dot_id: 0,
					apply_status: 0,
					status: 0
				},
				tableLoading: false,
				tableStatus: {
					enable: []
				},
				feeds: {
					data: [],
					record_count: 0,
					page_current: 1,
					page_size: 10
				},
				rateData: {
					data: []
				},
				addModal: {
					show: false
				},
				editModal: {
					show: false,
					id: 0
				},
				mapModal: {
					show: false,
					id: 0
				},
				rateModal: {
					show: false,
					id: 0
				},
				columns: [{
						title: 'ID',
						key: 'car_id',
						sortable: true,
						width: 100
					},
					{
						title: '车辆',
						render: (h, params) => {
							return h('div',
								params.row.car_brand_name + params.row.car_sys_name + params.row.car_type_name
							)
						}
					},
					{
						title: '图片',
						render: (h, params) => {
							let t = this
							return h('div', [
								h('img', {
									attrs: {
										src: params.row.car_sys_img,
									},
									style: {
										width: '50%',
										height: '50%'
									},
									on: {
										click: (value) => {}
									}
								}),
							])
						}
					},
					{
						title: '车牌',
						key: 'car_sn'
					},
					{
						title: '属性',
						render: (h, params) => {
							return h('div',
								params.row.car_gear_text + '|' + params.row.car_out_text + '|' + params.row.car_oil_text + '|' + params.row.car_class_text
							)
						}
					},
					{
						title: '网点',
						key: 'dot_name'
					},
					{
						title: '计费方式',
						render: (h, params) => {
							return h('div',
								params.row.d_price + '/天' + '|' + params.row.h_price + '/小时'
							)
						}
					},
					{
						title: '审核状态',
						key: 'apply_status_text'
					},
					{
						title: '使用状态',
						key: 'status_text'
					},
					{
						title: '操作',
						render: (h, params) => {
							let t = this;
							//按钮状态判断
							var change_text;
							switch(params.row.status) {
								case -1:
									change_text = '上线';
									break;
								case 1:
									change_text = '下线';
									break;
								case 2:
									change_text = '使用中';
									break;
							};
							return h('div', [
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									on: {
										click: () => {
											this.editModal.show = true
											this.editModal.id = params.row.car_id
										}
									}

								}, '编辑'),
								
								h('Button', {
									style: {
											margin: '5px'
										},
									props: {
										type: 'warning',
										size: 'small'
									},
									on: {
										click: () => {
											this.mapModal.show = true
											this.mapModal.id = params.row.car_id
										}
									}

								}, '位置'),
								
								h('Poptip', {
									props: {
										confirm: true,
										title: change_text + '？',
										transfer: true
									},
									on: {
										'on-ok': () => {
											if(params.row.status !== 2) {
												t.changeStatusExcute(params.row.car_id, -(params.row.status));
											}

										}
									}
								}, [
									h('Button', {
										style: {
//											margin: '5px'
										},
										props: {
											type: 'primary',
											size: 'small',
										}
									}, change_text),
								]),
								h('Poptip', {
									props: {
										confirm: true,
										title: '您确定要删除该车辆？',
										transfer: true
									},
									on: {
										'on-ok': () => {
											t.delExcute(params.row.car_id, params.index);
										}
									}
								}, [
									h('Button', {
										style: {
//											margin: '5px'
										},
										props: {
											type: 'error',
											size: 'small',
											placement: 'top'
										}
									}, '删除'),
								])

							])
						}
					},
				]
			}
		},
		created() {
			let t = this
			t.getTableDataExcute(t.feeds.page_current)
			t.getSearchDataExcute();
		},
		methods: {
			handleOnPageChange: function(page_current) {
				this.getTableDataExcute(page_current)
			},
			onPageSizeChange: function(page_size) {
				this.feeds.page_size = page_size
				this.getTableDataExcute(1)
			},
			getTableDataExcute(page_current) {
				let t = this
				t.tableLoading = true
				t.feeds.page_current = page_current
				//console.log(t.searchForm);
				getTableData(page_current, t.feeds.page_size, t.searchForm).then(res => {

					if(res.data.code == 1) {
						t.feeds.data = res.data.data.list
						t.feeds.record_count = res.data.data.record_count
						t.tableLoading = false
					} else {
						t.$Notice.error({
							title: res.data.msg
						})
						t.tableLoading = false
					}

				}, function(error) {
					t.tableLoading = false
				})
			},
			getSearchDataExcute() {
				let t = this;
				getData().then(res => {
					t.getSearchData.dot = res.data.data.dot;
					t.getSearchData.status = res.data.data.status;
					t.getSearchData.apply_status = res.data.data.apply_status;
				}, function(error) {
					t.tableLoading = false
				})
			},
			onSortChange: function(data) {

			},
			changeStatusExcute(car_id, status) {
				let t = this
				changeStatus(car_id, status).then(res => {
					if(res.data.code == 1) {
						t.getTableDataExcute(1)
						t.$Notice.success({
							title: res.data.msg
						})
					} else {
						this.$Notice.error({
							title: res.data.msg
						})
					}

				})
			},
			delExcute(car_id, key) {
				let t = this
				delCar(car_id).then(res => {
					if(res.data.code == 1) {
						t.feeds.data.splice(key, 1)
						t.$Notice.success({
							title: res.data.msg
						})
					} else {
						this.$Notice.error({
							title: res.data.msg
						})
					}

				})
			},
			rateExcute(dot_id) {
				let t = this;
				dotRate(dot_id).then(res => {
					if(res.data.code == 1) {
						t.rateData.data = res.data.data.list;
					} else {
						t.$Notice.error({
							title: res.data.msg
						})
					}

				})
			},
			addBtn() {
				this.addModal.show = true
			},
			addModalHide() {
				this.addModal.show = false
			},
			editModalHide() {
				this.editModal.show = false
			},
			mapModalHide() {
				this.mapModal.show = false
			}
		}
	}
</script>